import React, {Component} from 'react';
import {Button} from 'tinper-bee';
import './index.less';

import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';

export default class CommonModal extends Component{
  constructor(props){
    super(props);
    this.state = {
      className: this.props.className || '', //定制样式
    	showStatus: this.props.show,
    	contentText: this.props.content === '' ? '是否删除该信息？' : this.props.content,
      backdrop: this.props.backdrop,
      size: this.props.size || 'sm',
      oneButtonText: this.props.oneButtonText ? this.props.oneButtonText : '关闭',
      title: this.props.title || '',
      oneButtonClassName: this.props.oneButtonClassName || '',
      normalBtnText: this.props.paramBtnContext || {'type-1': '取消', 'type-2': '确定'},
      normalBtnClass: this.props.paramBtnClass || {'type-1': '', 'type-2': ''}
    }
  }
  componentWillReceiveProps (nextProps) {
      this.setState({
        showStatus: nextProps.show,
        size: nextProps.size || 'sm',
        contentText: nextProps.content || '是否删除该信息？',
        title: nextProps.title || '',
        oneButtonText: nextProps.oneButtonText || '关闭',
        oneButtonClassName: nextProps.oneButtonClassName || '',
        normalBtnText: nextProps.paramBtnContext || {'type-1': '取消', 'type-2': '确定'},
        normalBtnClass: nextProps.paramBtnClass || {'type-1': '', 'type-2': ''}
      });
  }
  close = () => {
    let close = this.props.close;
    if(close){
      close();
    }
    this.setState({
      showStatus: false
    });
  }
  handlerCancel = () => {
  	let cancel = this.props.cancel;
  	cancel();
  }
  handlerConfirm = () => {
      let confirm = this.props.confirm;
      confirm();
  }
  hide = () => {
      let hide = this.props.hide;
      if(hide){
          hide();
      } else {
          this.close();
          this.props.bindTrue? this.handlerConfirm(): null;
          this.props.bindCancel? this.handlerCancel(): null;
      }
  };
  render(){
  	return(
  			<Modal className={"modal-confirm" + ' ' +this.state.className} size={this.state.size} show = {this.state.showStatus}
           		 	onHide = {this.hide}
                backdrop={this.state.backdrop}
                keyboard={false}>
       		 	<Modal.Header closeButton>
                    <Modal.Title >{this.state.title}</Modal.Title>
                </Modal.Header >
                <Modal.Body>
                    {this.state.contentText}
                </Modal.Body>
                <Modal.Footer>
                    {
                      this.props.oneButton ?
                        <Button  colors="primary" onClick={this.handlerConfirm} className={this.state.oneButtonClassName}>
                          {this.state.oneButtonText}
                        </Button> :
                        <div>
                          <Button onClick={this.handlerCancel} className={this.state.normalBtnClass['type-1']}>{this.state.normalBtnText['type-1']}</Button>
                          <Button onClick={this.handlerConfirm}  className={this.state.normalBtnClass['type-2']} colors="primary">
                            {this.state.normalBtnText['type-2']}
                          </Button>
                        </div>
                    }
                </Modal.Footer>
           </Modal>
  		)
  }
}

CommonModal.PropTypes = {

}